<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="/css/css.css" rel="stylesheet" type="text/css"/>
    <link href="/css/common.css" rel="stylesheet" tyle="text/css"/>
    <script src="/js/jquery.min.1.8.2.js" type="text/javascript"></script>
    <script src="/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="/js/common_js.js" type="text/javascript"></script>
    <script src="/js/footer.js" type="text/javascript"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/layer/layer.js"></script>
    <link th:href="@{/css/css.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/common.css}" rel="stylesheet" tyle="text/css"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/js/jquery.min.1.8.2.js}" type="text/javascript"></script>
    <script th:src="@{/js/jquery.SuperSlide.2.1.1.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/common_js.js}" type="text/javascript"></script>
    <script th:src="@{/js/footer.js}" type="text/javascript"></script>

    <title>智慧商城首页</title>
    <!--    收藏提示-->

    <script>
        function addGood(skuId) {
            axios.get("/ucenter/collect/add/" + skuId).then(r => {
                // alert(r.data)
                if (r.data.code == 200) {
                    layer.msg("收藏成功!!!", {time: 1500}, () => {

                    });
                }
                if (r.data.code == 600) {
                    layer.msg("收藏失败!!!,请先登录!", {time: 1500}, () => {
                        location.href = "/front/user/login";
                    });
                }
            })
        }

        $(document).ready(function () {

            $.getJSON("/front/cart/countcarts", function (r) {

                console.log(r);
                let str = r.data;
                $('#shopping-amount').html(str);
                $('#count1').html(str);
            });
            $.getJSON("/front/cart/getcarts", function (r) {

                console.log(r);
                let carts = r.data;

                let selectMoney = 0;
                let selectNum = 0;
                for (let cart of carts) {
                    let specName = '';
                    let specName2 = '';
                    if (cart.sku.details != null) {
                        specName = cart.sku.details[0].specValue;
                        if (cart.sku.details.length > 1) {
                            specName2 = cart.sku.details[1].specValue;
                        }
                    }

                    $("#cartsmenu1").append("<li>" +
                        "<div class='img'><img src='" + cart.sku.spu.preview + "'></div>" +
                        "<div class='content'><p><a href='#'>" + cart.sku.spu.name + "</a></p>" +
                        "<p>" + specName + "|" + specName2 + "</p></div>" +
                        "<div class='Operations'>" +
                        "<p class='Price'>￥" + Number(cart.mount) * Number(cart.price).toFixed(2) + "</p>" +
                        "<p><a href='#'>删除</a></p></div>" +
                        "</li>");
                    $("#cartsmenu2").append("<li>" +
                        " <img src='" + cart.sku.spu.preview + "' width='40' height='40'> " +
                        " <a href='#'>" + cart.sku.spu.name + "</a> " +
                        " " + specName + "|" + specName2 + " " +
                        " ￥" + Number(cart.mount) * Number(cart.price).toFixed(2) +
                        " <a href='#'>删除</a> " +
                        "</li>");
                    if (cart.ischoose == 'y') {
                        selectNum = Number(selectNum) + 1;
                        selectMoney = selectMoney + Number(cart.mount) * Number(cart.price).toFixed(2);
                    }
                }
                selectMoney = Number(selectMoney).toFixed(2);
                $("#selectNum").html(selectNum);
                $("#selectMoney").html(selectMoney);
            });


        })
    </script>
</head>

<body>


<!--顶部样式-->
<div id="top">
    <div class="top">
        <div class="Collection"><em></em><a href="#">收藏我们</a></div>
        <div class="hd_top_manu clearfix">
            <ul class="clearfix">
                <li class="hd_menu_tit zhuce" data-addclass="hd_menu_hover" th:if="${user eq null}">欢迎光临本店！<a
                        th:href="@{/front/user/login}" class="red">[请登录]</a> 新用户<a th:href="@{/front/user/registered}"
                                                                                   class="red">[免费注册]</a></li>
                <li class="hd_menu_tit zhuce" data-addclass="hd_menu_hover" th:if="${user ne null}">欢迎光临本店！<a
                        th:href="@{/ucenter/user/index}" class="red" th:text="${user.account}"></a> <a
                        th:href="@{/front/user/logout}" class="red">安全退出</a></li>
                <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a th:href="@{/ucenter/order/list}">我的订单</a></li>
                <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a th:href="@{/front/cart}">购物车(<b>0</b>)</a></li>
                <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="#">联系我们</a></li>
                <li class="hd_menu_tit list_name" data-addclass="hd_menu_hover"><a href="#" class="hd_menu">客户服务</a>
                    <div class="hd_menu_list">
                        <ul>
                            <li><a href="#">常见问题</a></li>
                            <li><a href="#">在线退换货</a></li>
                            <li><a href="#">在线投诉</a></li>
                            <li><a href="#">配送范围</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--logo和搜索样式-->
<div id="header" class="header">
    <div class="logo">
        <a th:href="@{/front/SPU/index}"><img th:src="@{/images/logo1.png}" alt="logo" height="139" width="247"/></a>
        <div class="phone">
            免费咨询热线:<span class="telephone">400-3404-000</span>
        </div>
    </div>
    <div class="Search">
        <p><input name="" type="text" class="text"/><input name="" type="submit" value="" class="Search_btn"/></p>
        <p class="Words"><a th:each="cate : ${category}" th:href="@{/front/SPU/index/{id}(id=${cate.id})}"
                            th:text="${cate.name}"></a></p>
    </div>
</div>
<!--菜单栏样式-->
<!--导航栏样式-->
<div id="Menu" class="clearfix">
    <div class="Menu_style">
        <div id="allSortOuterbox">
            <div class="Category"><a href="#" class="Menu_img"><em></em></a></div>
            <div class="hd_allsort_out_box_new">
                <!--左侧栏目开始-->
                <div class="Menu_list">
                    <div class="menu_title">商品分类</div>
                    <a th:each="cate : ${category}" th:href="@{/front/SPU/index/{id}(id=${cate.id})}"
                       th:text="${cate.name}"></a>
                </div>
                <div class="Menu_list">
                    <div class="menu_title">推荐商品</div>
                    <ul class="recommend">
                        <li th:each="good,goodStat : ${goodsHot}" th:if="${goodStat.index} lt 3"><a
                                th:href="@{/front/SPU/view/{id}(id=${good.spu.id})}"
                                th:text="${good.spu.name}"></a></li>
                        <li th:each="good,goodStat : ${goodsNew}" th:if="${goodStat.index} lt 3"><a
                                th:href="@{/front/SPU/view/{id}(id=${good.spu.id})}"
                                th:text="${good.spu.name}"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--菜单栏-->
        <div class="Navigation" id="Navigation">
            <ul class="Navigation_name">
                <li><a class="nav_on" id="mynav1" href="index.html"><span>首页</span></a></li>
                <li><a class="nav_on" id="mynav2" th:href="@{/front/SPU/lists}"><span>商品中心</span></a></li>
            </ul>
        </div>
        <script>$("#Navigation").slide({titCell: ".Navigation_name li"});</script>
        <!--购物车-->

        <div class="hd_Shopping_list" id="Shopping_list">
            <div class="s_cart"><em></em><a th:href="@{/front/cart}">我的购物车</a> <i class="ci-right">&gt;</i><i
                    class="ci-count" id="shopping-amount">0</i></div>
            <div class="dorpdown-layer">
                <div class="spacer"></div>
                <!--            这是浮动弹窗1    -->
                <ul class="p_s_list" id="cartsmenu1">

                </ul>
                <div class="Shopping_style">
                    <div class="p-total">共选择<b id="selectNum">1</b>件商品　共计￥<strong id="selectMoney"> 0.00</strong></div>
                    <a th:href="@{/front/cart}" title="去购物车结算" id="btn-payforgoods" class="Shopping">去购物车结算</a>
                </div>
            </div>
        </div>
    </div>
    <!--幻灯片样式-->
    <div class="Plates" id="mian">
        <div class="bottom_style clearfix">
            <div class="image_display">
                <!--幻灯片样式-->
                <div class="slider">
                    <div id="slideBox" class="slideBox">
                        <div class="hd">
                            <ul></ul>
                        </div>
                        <div class="bd">
                            <ul>
                                <li th:each="good,goodStat : ${goodsNew}" th:if="${goodStat.index} lt 2"><a
                                        th:href="@{/front/SPU/view/{id}(id=${good.spu.id})}" target="_blank"><img
                                        th:src="|${good.spu.preview}|"/></a></li>
                                <li th:each="good,goodStat : ${goodsHot}" th:if="${goodStat.index} lt 2"><a
                                        th:href="@{/front/SPU/view/{id}(id=${good.spu.id})}" target="_blank"><img
                                        th:src="|${good.spu.preview}|"/></a></li>
                            </ul>
                        </div>
                        <a class="prev" href="javascript:void(0)"></a>
                        <a class="next" href="javascript:void(0)"></a>
                    </div>
                    <script type="text/javascript">
                        jQuery(".slideBox").slide({
                            titCell: ".hd ul",
                            mainCell: ".bd ul",
                            autoPlay: true,
                            autoPage: true,
                            interTime: 9000
                        });
                    </script>
                </div>
            </div>
        </div>
        <!--内容样式-->
        <div class="Selling_list">
            <div id="slideBox_list" class="slideBox_list">
                <div class="hd">
                    <span class="arrow"><a class="next"></a><a class="prev"></a></span>
                    <ul>
                        <li><a href="#">新品推荐</a></li>
                        <li><a href="#">热销产品</a></li>
                    </ul>
                </div>
                <div class="bd">
                    <ul>
                        <li class="s_Products" th:each="good,goodStat : ${goodsNew}" th:if="${goodStat.index} lt 10">
                            <div class="Products_list_name">
                                <div class="img center"><a th:href="@{/front/SPU/view/{id}(id=${good.spu.id})}"><img
                                        th:src="|${good.spu.preview}|" style="width:220px;height:220px"/></a>
                                </div>
                                <div class="title_name"><a th:href="@{/front/SPU/view/{id}(id=${good.spu.id})}"
                                                           th:text="${good.spu.name}"></a>
                                </div>
                                <div class="s_Price clearfix">
                                    <span class="Current_price" th:text="| ${good.price}|">商城价<em></em></span>
                                </div>
                                <div class="p-operate">
                                    <a th:href="|javascript:addGood(${good.id})|" class="btn_login">收藏</a>
                                </div>

                            </div>
                        </li>


                    </ul>
                    <ul>
                        <li class="gl-item" th:each="good,goodStat : ${goodsHot}" th:if="${goodStat.index} lt 10">
                            <div class="Products_list_name">
                                <div class="img center"><a th:href="@{/front/SPU/view/{id}(id=${good.spu.id})}"><img
                                        th:src="|${good.spu.preview}|" style="width:220px;height:220px"/></a>
                                </div>
                                <div class="title_name"><a th:href="@{/front/SPU/view/{id}(id=${good.spu.id})}"
                                                           th:text="${good.spu.name}"></a>
                                </div>
                                <div class="s_Price clearfix">
                                    <span class="Current_price" th:text="| ${good.price}|">商城价<em></em></span>
                                </div>
                                <div class="p-operate">
                                    <a th:href="|javascript:addGood(${good.id})|" class="btn_login">收藏</a>
                                </div>
                            </div>
                        </li>
                    </ul>

                </div>
            </div>
            <script type="text/javascript">jQuery(".slideBox_list").slide();</script>
        </div>
        <!--产品系列样式表-->

        <!--新闻中心-->

        <!--友情链接-->
        <div class="Links">
            <div class="link_title">友情链接</div>
            <div class="link_address"><a href="#">智慧家居协会</a> <a href="#">链接地址</a> <a href="#">链接地址</a> <a
                    href="#">链接地址 </a> <a href="#">链接地址</a> <a href="#">链接地址</a> <a href="#">链接地址</a></div>
        </div>
    </div>
    <!--底部样式-->
    <div class="footer">
        <div class="streak"></div>
        <div class="footerbox clearfix">
            <div class="left_footer">
                <div class="img"><img th:src="@{/images/logo1.png}" alt="logo" height="120" width="200"/></div>
                <div class="phone">
                    <h2>服务咨询电话</h2>
                    <p class="Numbers">400-0000-000</p>
                </div>
            </div>
            <div class="right_footer">
                <dl>
                    <dt><em class="icon_img"></em>购物指南</dt>
                    <dd><a href="#">怎样购物</a></dd>
                    <dd><a href="#">积分政策</a></dd>
                    <dd><a href="#">会员优惠</a></dd>
                    <dd><a href="#">订单状态</a></dd>
                    <dd><a href="#">产品信息</a></dd>
                    <dd><a href="#">怎样购物</a></dd>
                </dl>
                <dl>
                    <dt><em class="icon_img"></em>配送方式</dt>
                    <dd><a href="#">快递资费及送达时间</a></dd>
                    <dd><a href="#">快递覆盖地区查询</a></dd>
                    <dd><a href="#">验货与签收</a></dd>
                    <dd><a href="#">订单状态</a></dd>
                    <dd><a href="#">产品信息</a></dd>
                    <dd><a href="#">怎样购物</a></dd>
                </dl>
                <dl>
                    <dt><em class="icon_img"></em>配送方式</dt>
                    <dd><a href="#">货到付款</a></dd>
                    <dd><a href="#">支付宝</a></dd>
                    <dd><a href="#">财付通</a></dd>
                    <dd><a href="#">网银支付</a></dd>
                    <dd><a href="#">银联支付</a></dd>
                </dl>
                <dl>
                    <dt><em class="icon_img"></em>售后服务</dt>
                    <dd><a href="#">退换货原则</a></dd>
                    <dd><a href="#">退换货要求与运费规则</a></dd>
                    <dd><a href="#">退换货流程</a></dd>
                </dl>
                <dl>
                    <dt><em class="icon_img"></em>关于我们</dt>
                    <dd><a href="#">关于我们</a></dd>
                    <dd><a href="#">友情链接</a></dd>
                    <dd><a href="#">媒体报道</a></dd>
                    <dd><a href="#">新闻动态</a></dd>
                    <dd><a href="#">企业文化</a></dd>

                </dl>
            </div>
        </div>
        <div class="slogen">
            <div class="footerbox clearfix ">
                <ul class="wrap">
                    <li>
                        <a href="#"><img src="/images/icon_img_02.png" data-bd-imgshare-binded="1"></a>
                        <b>正品保证</b>
                        <span>正品行货 放心选购</span>
                    </li>
                    <li><a href="#"><img src="/images/icon_img_03.png" data-bd-imgshare-binded="2"></a>
                        <b>满68元包邮</b>
                        <span>购物满68元，免费快递</span>
                    </li>
                    <li>
                        <a href="#"><img src="/images/icon_img_04.png" data-bd-imgshare-binded="3"></a>
                        <b>厂家直供</b>
                        <span>价格更低，质量更可靠</span>
                    </li>
                    <li>
                        <a href="#"><img src="/images/icon_img_05.png" data-bd-imgshare-binded="4"></a>
                        <b>权威认证</b>
                        <span>政府扶持单位，安全保证</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footerbox Copyright">
            <p><a href="#">关于我们</a> | <a href="#">隐私申明</a> | <a href="#">成为供应商</a> | <a href="#">茶叶</a> | <a
                    href="#">博客</a> |<a href="#">友情链接</a> | <a href="#">网站地图</a></p>
            <p>Copyright 2010 - 2015 巴山雀舌 四川巴山雀舌茗茶实业有限公司 zuipin.cn All Rights Reserved </p>
            <p>川ICP备10200063号-1</p>
            <a href="#" class="return_img"></a>
        </div>
    </div>
    <!--右侧菜单栏购物车样式-->
    <div class="fixedBox">
        <ul class="fixedBoxList">
            <li class="fixeBoxLi user"><a th:href="@{/ucenter/user/index}"> <span class="fixeBoxSpan"></span>
                <strong>用户</strong></a></li>
            <li class="fixeBoxLi cart_bd" style="display:block;" id="cartboxs">
                <p class="good_cart" id="count1">0</p>
                <a th:href="@{/front/cart}"> <span class="fixeBoxSpan"></span> <strong>购物车 </strong></a>
                <div class="cartBox">
                    <div class="bjfff"></div>
                    <div class="message">
                    </div>
                    <ul class="p_s_list" id="cartsmenu2">
                        <!--   悬浮显示框2-->
                    </ul>

                </div>
            </li>
            <li class="fixeBoxLi Service "><span class="fixeBoxSpan"></span> <strong>客服</strong>
                <div class="ServiceBox">
                    <div class="bjfffs"></div>
                    <dl onclick="javascript:;">
                        <dt><img src="/images/qq.png" height="80" width="75"></dt>
                        <dd><strong>QQ客服1</strong>
                            <p class="p1">9:00-22:00</p>
                            <p class="p2"><a
                                    href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456&amp;site=DGG三端同步&amp;menu=yes">点击交谈</a>
                            </p>
                        </dd>
                    </dl>
                    <dl onclick="javascript:;">
                        <dt><img src="/images/qq.png" height="80" width="75"></dt>
                        <dd><strong>QQ客服1</strong>
                            <p class="p1">9:00-22:00</p>
                            <p class="p2"><a
                                    href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456&amp;site=DGG三端同步&amp;menu=yes">点击交谈</a>
                            </p>
                        </dd>
                    </dl>
                </div>
            </li>
            <li class="fixeBoxLi code cart_bd " style="display:block;" id="cartboxs">
                <span class="fixeBoxSpan"></span> <strong>微信</strong>
                <div class="cartBox">
                    <div class="bjfff"></div>
                    <div class="QR_code">
                        <p><img src="/images/qrcode.png" width="120px" height="120px" style=" margin-top:10px;"/></p>
                        <p>微信扫一扫，关注我们</p>
                    </div>
                </div>
            </li>

            <li class="fixeBoxLi Home"><a th:href="@{/ucenter/collect/list}"> <span class="fixeBoxSpan"></span> <strong>收藏</strong>
            </a></li>
            <li class="fixeBoxLi BackToTop"><span class="fixeBoxSpan"></span> <strong>返回顶部</strong></li>
        </ul>
    </div>
</div>
</body>
</html>
